<template>
  <el-container class="layout-container">
    <el-aside :width="sidebarWidth" :class="{ collapsed: isCollapsed }">
      <div class="sidebar-header" :style="{ backgroundColor: headerColor }">
        <img :src="logoSrc" alt="Logo" v-if="!isCollapsed" />
        <span v-if="!isCollapsed">管理系统</span>
        <el-button type="text" @click="toggleSidebar" class="toggle-btn">
          <el-icon :size="18" class="toggle-icon">
            <template v-if="isCollapsed"><ArrowRightBold /></template>
            <template v-else><ArrowLeftBold /></template>
          </el-icon>
        </el-button>
      </div>
      <el-menu
          :collapse="isCollapsed"
          :background-color="'#2b3442'"
          :text-color="'#dfe6ec'"
          :active-text-color="'#409EFF'"
          router
          unique-opened
          class="sidebar-menu"
      >
        <!-- 菜单项省略 -->
      </el-menu>
    </el-aside>
    <el-container>
      <el-header :style="{ backgroundColor: '#f0f2f5' }">
        <div class="header-content">
          <el-button @click="toggleSidebar" class="toggle-btn">
            <el-icon :size="18" class="toggle-icon">
              <template v-if="isCollapsed"><ArrowRightBold /></template>
              <template v-else><ArrowLeftBold /></template>
            </el-icon>
          </el-button>
          <span class="header-title">主标题</span>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { HomeFilled, UserFilled, ShoppingCartFilled, ArrowRightBold, ArrowLeftBold } from '@element-plus/icons-vue';

export default {
  data() {
    return {
      isCollapsed: false,
      logoSrc: require('@/assets/logo.png'), // 假设你有一个logo图片
      headerColor: '#409EFF',
    };
  },
  computed: {
    sidebarWidth() {
      return this.isCollapsed ? '60px' : '200px';
    },
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
  components: {
    HomeFilled,
    UserFilled,
    ShoppingCartFilled,
    ArrowRightBold,
    ArrowLeftBold,
  },
};
</script>

<style scoped>
.layout-container {
  height: 100vh; /* 设置容器的高度为视口高度 */
  display: flex;
}

/* 保持原有的样式... */

.el-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
}

.el-header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .el-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow-y: auto;
  }
  .el-container {
    margin-left: 0;
  }
  .el-header,
  .el-main {
    padding: 10px;
  }
}
</style>